import React from 'react'
import { Layout, Menu} from 'antd';
const {Content,Sider } = Layout;
import {Link, Route, Switch} from 'react-router-dom'
// 导入组件
import MovieList from './MovieList'
// 电影详情组件
import MovieDetail from './MovieDetail'

export default class Movie extends React.Component{
  constructor(props){
    super(props)
    this.state = {}
  }
  render(){
    return <Layout style={{background: '#fff', height:'100%'}}>
    <Sider width={200} style={{ background: '#fff' }}>
      <Menu
        mode="inline"
        defaultSelectedKeys={[window.location.hash.split('/')[2]]}
        defaultOpenKeys={['sub1']}
        style={{ height: '100%' }}
      >
        <Menu.Item key="in_theaters">
          <Link to="/movie/in_theaters/1">正在热映</Link>
        </Menu.Item>
        <Menu.Item key="coming_soon">
          <Link to="/movie/coming_soon/1">即将上映</Link>
        </Menu.Item>
        <Menu.Item key="top250">
          <Link to="/movie/top250/1">Top250</Link>
        </Menu.Item>
      </Menu>
    </Sider>
    <Content style={{ padding: '0 10px', minHeight: 280 }}>
      {/* 注：精确匹配模式也会从上到下将所有的规则匹配一遍，此时我们需要用react
      -router-dom的Swipch组件 将所有匹配规则包起来，当匹配时如果遇到匹配项则
      停止继续匹配 */}
      <Switch>
        <Route exact path="/movie/detail/:id" component={MovieDetail}></Route>
        <Route exact path="/movie/:type/:page" component={MovieList}></Route>
      </Switch>
    </Content>
  </Layout>
  }
}